웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리의 선택자 메소드 eq()와 get()은 둘 다 인덱스 값을 사용해 원하는 위치의 요소를 선택해 가져올 수 있는 선택자 메소드입니다. 예를들면...
클래스명이 icon인 모든 요소들중 두번째 요소만 반환합니다. 또한 아래처럼 음수의 사용이 가능합니다.
클래스명이 icon인 모든 요소들중 뒤에서 시작해 두번째 요소만 반환합니다. 이 둘의 차이점은 불러오는 방식이 틀리다는 점인데요...
eq() 메소드의 경우 제이쿼리 객체로 반환합니다. 그래서 제이쿼리의 다른 메소드의 사용이 가능하게 됩니다.
하지만 get() 메소드의 경우 이와달리 DOM 객체로서 반환하게 됩니다. 그렇기 때문에 반환된 객체에 제이쿼리 메소드를 적용하면 에러메시지를 출력하게 됩니다. 그리고 get() 메소드는 값을 배열로 저장하기 때문에 배열로 지정할 경우 편리합니다. 이와 동일하게 배열로 저장하기 위한 제이쿼리 메소드로 toArray()가 있습니다.
"제이쿼리 객체는 제이쿼리 메소드를 통해 선택요소를 조작할 수 있지만 DOM객체는 자바스크립트를 사용해 조작하여야 합니다. 따라서 원하는 요소를 제이쿼리로 조작할 경우 제이쿼리 선택자인 eq()를 사용하는 것이 중요합니다."
get()을 사용한 요소의 지정은 아래처럼 괄호를 사용한 방법과 동일하게 DOM 객체로 반환하게 됩니다.
<script>
$('.icon').eq(2);
$('.icon').get(2);
</script>
$('.icon').eq(2);
$('.icon').get(2);
</script>
클래스명이 icon인 모든 요소들중 두번째 요소만 반환합니다. 또한 아래처럼 음수의 사용이 가능합니다.
<script>
$('.icon').eq(-2);
$('.icon').get(-2);
</script>
$('.icon').eq(-2);
$('.icon').get(-2);
</script>
클래스명이 icon인 모든 요소들중 뒤에서 시작해 두번째 요소만 반환합니다. 이 둘의 차이점은 불러오는 방식이 틀리다는 점인데요...
eq() 메소드의 경우 제이쿼리 객체로 반환합니다. 그래서 제이쿼리의 다른 메소드의 사용이 가능하게 됩니다.
하지만 get() 메소드의 경우 이와달리 DOM 객체로서 반환하게 됩니다. 그렇기 때문에 반환된 객체에 제이쿼리 메소드를 적용하면 에러메시지를 출력하게 됩니다. 그리고 get() 메소드는 값을 배열로 저장하기 때문에 배열로 지정할 경우 편리합니다. 이와 동일하게 배열로 저장하기 위한 제이쿼리 메소드로 toArray()가 있습니다.
"제이쿼리 객체는 제이쿼리 메소드를 통해 선택요소를 조작할 수 있지만 DOM객체는 자바스크립트를 사용해 조작하여야 합니다. 따라서 원하는 요소를 제이쿼리로 조작할 경우 제이쿼리 선택자인 eq()를 사용하는 것이 중요합니다."
get()을 사용한 요소의 지정은 아래처럼 괄호를 사용한 방법과 동일하게 DOM 객체로 반환하게 됩니다.
$('#testEle').get(3);
$('#testEle')[3];
// 둘 다 동일하게 DOM 객체를 반환함
$('#testEle')[3];
// 둘 다 동일하게 DOM 객체를 반환함
아래의 글도 찾고 계시지 않나요?